<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>发布新课程</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            max-width: 750px;
            margin: 0 auto;
            color: #333;
            background-color: #f5f5f5;
        }
        
        .header {
            background-color: #2196F3;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        
        .back-btn {
            position: absolute;
            left: 15px;
            top: 15px;
            font-size: 16px;
        }
        
        .save-btn {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 16px;
        }
        
        .form-container {
            padding: 15px;
        }
        
        .form-section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2196F3;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            min-height: 80px;
            resize: vertical;
        }
        
        .upload-area {
            border: 1px dashed #ddd;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
        }
        
        .upload-icon {
            font-size: 24px;
            color: #2196F3;
            margin-bottom: 5px;
        }
        
        .upload-text {
            font-size: 14px;
            color: #666;
        }
        
        .preview-image {
            max-width: 100%;
            max-height: 200px;
            margin-top: 10px;
            display: none;
        }
        
        .add-lesson-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 15px;
            font-size: 14px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
        }
        
        .lesson-item {
            background-color: #f9f9f9;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
            position: relative;
        }
        
        .remove-lesson {
            position: absolute;
            right: 10px;
            top: 10px;
            color: #f44336;
            font-size: 18px;
            cursor: pointer;
        }
        
        .video-preview {
            width: 100%;
            margin-top: 10px;
            display: none;
        }
        
        .video-info {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="back-btn" onclick="history.back()">←</div>
        发布新课程
        <div class="save-btn" onclick="submitCourse()">发布</div>
    </div>
    
    <div class="form-container">
        <div class="form-section">
            <div class="section-title">课程基本信息</div>
            
            <div class="form-group">
                <label class="form-label">课程标题</label>
                <input type="text" class="form-input" id="course-title" placeholder="请输入课程标题">
            </div>
            
            <div class="form-group">
                <label class="form-label">课程封面</label>
                <div class="upload-area" onclick="document.getElementById('course-cover').click()">
                    <div class="upload-icon">+</div>
                    <div class="upload-text">点击上传课程封面</div>
                    <img id="course-cover-preview" class="preview-image">
                </div>
                <input type="file" id="course-cover" accept="image/*" style="display: none;" onchange="previewImage(this, 'course-cover-preview')">
            </div>
            
            <div class="form-group">
                <label class="form-label">课程价格 (元)</label>
                <input type="number" class="form-input" id="course-price" placeholder="请输入课程价格" min="0" step="0.01">
            </div>
            
            <div class="form-group">
                <label class="form-label">课程简介</label>
                <textarea class="form-textarea" id="course-description" placeholder="请输入课程简介"></textarea>
            </div>
        </div>
        
        <div class="form-section">
            <div class="section-title">课程章节</div>
            
            <div id="lessons-container">
                <!-- 章节列表将在这里动态添加 -->
            </div>
            
            <button type="button" class="add-lesson-btn" onclick="addLesson()">+ 添加章节</button>
        </div>
    </div>
    
    <script>
        // 预览上传的图片
        function previewImage(input, previewId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById(previewId);
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(file);
            }
        }
        
        // 预览上传的视频
        function previewVideo(input, previewId, infoId) {
            const file = input.files[0];
            if (file) {
                const preview = document.getElementById(previewId);
                const info = document.getElementById(infoId);
                
                // 显示视频信息
                info.textContent = `已选择: ${file.name} (${formatFileSize(file.size)})`;
                
                // 如果是视频文件，创建预览
                if (file.type.startsWith('video/')) {
                    const videoURL = URL.createObjectURL(file);
                    preview.src = videoURL;
                    preview.style.display = 'block';
                }
            }
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 添加新章节
        function addLesson() {
            const lessonsContainer = document.getElementById('lessons-container');
            const lessonId = Date.now(); // 使用时间戳作为唯一ID
            
            const lessonHtml = `
                <div class="lesson-item" id="lesson-${lessonId}">
                    <span class="remove-lesson" onclick="removeLesson('${lessonId}')">×</span>
                    
                    <div class="form-group">
                        <label class="form-label">章节标题</label>
                        <input type="text" class="form-input" id="lesson-title-${lessonId}" placeholder="请输入章节标题">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">章节封面 (可选)</label>
                        <div class="upload-area" onclick="document.getElementById('lesson-cover-${lessonId}').click()">
                            <div class="upload-icon">+</div>
                            <div class="upload-text">点击上传章节封面</div>
                            <img id="lesson-cover-preview-${lessonId}" class="preview-image">
                        </div>
                        <input type="file" id="lesson-cover-${lessonId}" accept="image/*" style="display: none;" 
                            onchange="previewImage(this, 'lesson-cover-preview-${lessonId}')">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">章节视频</label>
                        <div class="upload-area" onclick="document.getElementById('lesson-video-${lessonId}').click()">
                            <div class="upload-icon">+</div>
                            <div class="upload-text">点击上传章节视频</div>
                            <video id="lesson-video-preview-${lessonId}" class="video-preview" controls></video>
                            <div id="lesson-video-info-${lessonId}" class="video-info"></div>
                        </div>
                        <input type="file" id="lesson-video-${lessonId}" accept="video/*" style="display: none;" 
                            onchange="previewVideo(this, 'lesson-video-preview-${lessonId}', 'lesson-video-info-${lessonId}')">
                    </div>
                </div>
            `;
            
            lessonsContainer.insertAdjacentHTML('beforeend', lessonHtml);
        }
        
        // 删除章节
        function removeLesson(lessonId) {
            const lessonElement = document.getElementById(`lesson-${lessonId}`);
            if (lessonElement) {
                lessonElement.remove();
            }
        }
        
        // 提交课程
        function submitCourse() {
            // 收集课程基本信息
            const courseTitle = document.getElementById('course-title').value;
            const coursePrice = document.getElementById('course-price').value;
            const courseDescription = document.getElementById('course-description').value;
            const courseCover = document.getElementById('course-cover').files[0];
            
            if (!courseTitle) {
                alert('请填写课程标题');
                return;
            }
            
            if (!coursePrice) {
                alert('请填写课程价格');
                return;
            }
            
            // 收集章节信息
            const lessons = [];
            const lessonItems = document.querySelectorAll('.lesson-item');
            
            lessonItems.forEach(item => {
                const lessonId = item.id.replace('lesson-', '');
                const title = document.getElementById(`lesson-title-${lessonId}`).value;
                const cover = document.getElementById(`lesson-cover-${lessonId}`).files[0];
                const video = document.getElementById(`lesson-video-${lessonId}`).files[0];
                
                if (!title) {
                    alert('请填写所有章节的标题');
                    return;
                }
                
                if (!video) {
                    alert('请上传所有章节的视频');
                    return;
                }
                
                lessons.push({
                    title,
                    cover,
                    video
                });
            });
            
            if (lessons.length === 0) {
                alert('请至少添加一个章节');
                return;
            }
            
            // 这里可以添加实际的提交逻辑
            // 例如使用FormData上传文件和数据
            /*
            const formData = new FormData();
            formData.append('title', courseTitle);
            formData.append('price', coursePrice);
            formData.append('description', courseDescription);
            if (courseCover) formData.append('cover', courseCover);
            
            lessons.forEach((lesson, index) => {
                formData.append(`lessons[${index}][title]`, lesson.title);
                if (lesson.cover) formData.append(`lessons[${index}][cover]`, lesson.cover);
                formData.append(`lessons[${index}][video]`, lesson.video);
            });
            
            fetch('/api/courses', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                alert('课程发布成功');
                window.location.href = '/teacher/courses';
            })
            .catch(error => {
                console.error('Error:', error);
                alert('课程发布失败');
            });
            */
            
            // 模拟提交成功
            alert('课程信息验证通过，可以提交到服务器了');
            console.log({
                courseTitle,
                coursePrice,
                courseDescription,
                courseCover,
                lessons
            });
        }
        
        // 页面加载时自动添加一个章节
        window.onload = addLesson;
    </script>
</body>
</html>